<template>
	<view>
		<userinfo v-if="user_options.toLogin" :options="user_options" @getUserscope="getUserInfo" @toLogin="getUserInfo" ></userinfo>
		<view class="container">
			<view v-if="!no_data">
				<view class="card" v-for="(item,index) in listdata">
					<view class="left-icon">
						<image :src="item.img_path" class="left-img"></image>
					</view>
					<view class="right-card">
						<view class="text-box" @tap="callphone(item.phone)">
							<view class="title">{{item.title}}</view>
							<view class="text-phone">
								<view class="phone-icon">
									<image src="../../../static/images/phone.png" class="phone-img"></image>
								</view>
								<view class="text-left">{{item.phone}}</view>
								<view class="tips">拨打</view>
							</view>
						</view>
						<view class="right-text" @tap="goUrl" :data-url="item.url">
							<view class="text">点击进入</view>
							<view class="right-icon">
								<image src="../../../static/images/right_icon.png" class="right-img"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tip_box_no_data" v-if="no_data">
				<image class="no_data_img" src="../../../static/images/no_data.png"></image>
				<view class='no_tip_content'>暂无内容</view>
			</view>
		</view>
	</view>
</template>

<script>
	var common = require('../../../utils/common.js');
	var app = getApp();
	var _this;
	const getcovenientList = (type) => {
		common.post('HouseApi&a=service_list', {
			village_id: _this.village_id,
			pigcms_id: _this.pigcms_id,
			page: 1,
			id: _this.id
		}, data => {
			console.log("++++++++++",data)
			_this.listdata = data.list
			if(_this.listdata.length == 0){
				_this.no_data = true;
			}
		});
	}
	export default {
		data() {
			return {
				listdata: [],
				village_id: 0,
				pigcms_id: 0,
				no_data: false,
				id:'',
				user_options:{}
			}
		},
		onLoad(options) {
			_this = this;
			_this.id = options.id;
			_this.title = decodeURIComponent(options.title);
			uni.setNavigationBarTitle({
				title: "便民列表"
			});
			
			const res = uni.getStorageSync('village_key');
			if (res) {
				_this.village_id = res.village_id;
				_this.pigcms_id = res.pigcms_id;
				_this.village_name = res.village_name;
			};
			
			common.setMainColor(_this, function(config) {
				getcovenientList();
			});
		},
		methods: {
			getUserInfo(e) {
				console.log('user.info', e.userInfo);
				_this.user_options = {}
			},
			callphone(phone){
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
			goUrl: function(e) {
				console.log('----------------------');
				console.log(e);
			
				if (e.type == 'submit') {
					common.upFormid(e);
				}
			
				if (e.currentTarget.dataset.goodsid) {
					goodsReport(e.currentTarget.dataset.goodsid);
				}
			
				var nums = e.currentTarget.dataset.nums;
				var pageTitle = e.currentTarget.dataset.url_title;
				var url = e.currentTarget.dataset.url;
			    
				if(url == ''){
					return;
				}
			    if (_this.village_id) {
			        url = common.changeURLArg(url, 'village_id', _this.village_id);
			    }
				
				if (_this.pigcms_id) {
					url = common.changeURLArg(url, 'pigcms_id', _this.pigcms_id);
				}
			
				if (!pageTitle) {
					pageTitle = '';
				}
				console.log('nums', nums)
				console.log('url_0', url)
				if (nums) {
					common.post('Login&a=house_adver_click', {
						adver_id: nums
					}, function(e) {
						common.parseUrl(url, '', false, pageTitle);
					});
				} else {
					common.parseUrl(url, '', false, pageTitle);
				}
			},
		},
		components: {

		},
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}

	.container {
		margin: 0;
		padding: 0;
	}

	
	.bgbox {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.card {
		background: rgb(245,245,245);
		margin: 30rpx;
		padding: 30rpx;
		display: flex;
		border-radius: 20rpx;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.no_data_tip {
		
	}

	.no_tip_content {
		padding: 30rpx 18%;
		color: #919191;
		font-size: 24rpx;
		text-align: center;
	}
	.left-icon {
		width: 90rpx;
		height: 90rpx;
		flex-shrink: 0;
	}
	.left-img {
		width: 100%;
		height: 100%;
		display: block;
	}
	.right-card {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-left: 15rpx;
	}
	.text-box {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.text-phone {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
	}
	.right-text {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
	}
	.phone-icon {
		width: 30rpx;
		height: 30rpx;
	}
	.phone-img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.right-icon {
		width: 30rpx;
		height: 30rpx;
		margin-top:30rpx;
		margin-left:6rpx;
	}
	.right-img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.title {
		font-size: 30rpx;
		font-weight: 700;
		font-stretch: normal;
		line-height: 60rpx;
		letter-spacing: 0px;	
	}
	.text-left {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 40rpx;
		letter-spacing: 0px;
		color: #999999;
	}
	.tips {
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: #FFFFFF;
		padding: 0rpx 10rpx;
		background: rgb(33, 130, 243);
		border-radius: 5rpx;
		margin-left: 15rpx;
	}
	.text {
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 90rpx;
		letter-spacing: 0px;
		color: #CCCCCC;
		padding-left: 100rpx;
	}
	
	.tip_box_no_data {
		padding-top: calc((100vh - 288rpx - 21rpx)/2);
		font-size: 28rpx;
		text-align: center;
	}
	.tip_box_no_data .tip_title {
		width: 100%;
		text-align: center;
	}
	.no_data_img{
		width:374rpx;
		height:288rpx;
	}
</style>
